<template>
  <div class="model-stable">
    <div class="top">
      <div class="chart left-chart">
        <exam-num-chart :x-labels="chartData.accessDate" :y-values="chartData.accessNum" />
      </div>
      <div class="chart right-chart">
        <exam-state-chart
          :x-labels="chartData.accessDateState"
          :success-values="chartData.successNum"
          :failure-values="chartData.failNum"
        />
      </div>
    </div>
    <div class="bottom">
      <div class="box left-box">
        <div class="title">模型调用考核说明</div>
        <div class="content">
          <div class="line">
            <span class="text">考核要求：</span>
            <span class="num blue">{{ chartData.instructions.standard }}%</span>
            <span class="text ml20">考核结果：</span>
            <span :class="['num', chartData.instructions.khResult == '合格' ? 'green' : 'red']">{{
              chartData.instructions.khResult
            }}</span>
          </div>
          <div class="line">
            <span class="text">累计调用次数：</span>
            <span class="num">{{ chartData.instructions.tnum || 0 }}</span>
            <span class="text">次</span>
            <span class="text ml20">成功调用次数：</span>
            <span class="num blue">{{ chartData.instructions.snum || 0 }}</span>
            <span class="text">次</span>
            <span class="text ml20">失败调用次数：</span>
            <span class="num blue">{{ chartData.instructions.fnum || 0 }}</span>
            <span class="text">次</span>
          </div>
          <div class="line">
            <span class="text">成功率：</span>
            <span class="num green"> {{ chartData.instructions.success }}% </span>
          </div>
          <!-- <div class="line">
            <span class="text">正式对外调用次数：</span>
            <span class="num">{{ chartData.instructions.tnum || 0 }}</span>
            <span class="text">次</span>
            <span class="text ml20">成功调用次数：</span>
            <span class="num blue">{{ chartData.instructions.snum || 0 }}</span>
            <span class="text">次</span>
            <span class="text ml20">失败调用次数：</span>
            <span class="num blue">{{ chartData.instructions.fnum || 0 }}</span>
            <span class="text">次</span>
          </div> -->
          <!-- <div class="line">
            <span class="text">成功率：</span>
            <span class="num green"> {{ chartData.instructions.success }}% </span>
          </div> -->
        </div>
      </div>
      <div class="box right-box">
        <div class="title">模型调用详情</div>
        <div class="content">
          <div class="table">
            <el-table
              :data="listData"
              border
              height="100%"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column prop="day" label="调用日期">
                <template #default="{ row }">
                  {{ row.year + '-' + row.month + '-' + row.day }}
                </template>
              </el-table-column>
              <el-table-column prop="tnum" label="调用次数" />
              <el-table-column prop="suorer" label="成功/失败">
                <template #default="{ row }">
                  {{ row.snum + '/' + row.fnum }}
                </template>
              </el-table-column>
              <el-table-column prop="success" label="成功率(%)">
                <!-- <template #default="{ row }">
                  {{ handleSuccessRate(row.accessNum, row.accessNum) }}
                </template> -->
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="page">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="formParamas.pageSize"
              background
              layout="total, prev, pager, next"
              :total="page.total"
              @current-change="handleCurrentChange"
            />
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, onUnmounted, computed, watch } from 'vue'
import ExamNumChart from '@/components/app-echart/exam-num-chart.vue'
import ExamStateChart from '@/components/app-echart/exam-state-chart.vue'
import emitter from '@/utils/bus'
import {
  //模型稳定性考核chat
  getmodelStabilityChart,
  //模型稳定性考核分页列表
  getModelStabilityList,
  //模型评分
  getModelScoring,
  modelStability
} from '@/services/modules/model-exam.js'
let props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }
})

const currentPage = ref(1)
const page = reactive({
  total: 0
  // pageNumber: 1,
  // pageSize: 10
})
// chart接收数据
const chartData = reactive({
  // 调用日期
  accessDate: [],
  //
  accessDateState: [],
  // 访问次数
  accessNum: [],
  // 成功次数
  successNum: [],
  // 失败次数
  failNum: [],
  //模型考核说明
  instructions: {}
})
// listData
const listData = ref([])
// 模型评分
let scoringData = ref({})
// let state = reactive({})
// 分页查询参数
let formParamas = reactive({
  pageNum: 1,
  pageSize: 10,
  // 月份
  month: '',
  // 模型类型
  modelType: '',
  // 模型编号
  modelName: ''
})
const state = reactive({
  formEmit: {}
})
onMounted(() => {
  // acceptChartData()
  // acceptListData()
  // // 模型评分
  // acceptModelScoring()
})
onUnmounted(() => {
  // emitter.off('searchData', searchDataValue)
})
const searchDataValue = (value) => {
  chartData.accessDate = []
  chartData.accessDateState = []
  chartData.accessNum = []
  chartData.successNum = []
  chartData.failNum = []
  formParamas = Object.assign(formParamas, value)
  state.formEmit = formParamas
  modelStability(formParamas).then((res) => {
    if (res.code == 200) {
      res.data.num.forEach((item) => {
        chartData.accessDate.push(item.times)
        chartData.accessNum.push(item.cnum)
      })
      res.data.status.forEach((item) => {
        chartData.accessDateState.push(item.times)
        chartData.successNum.push(item.snum)
        chartData.failNum.push(item.fnum)
      })
      chartData.instructions = res.data.instructions
      listData.value = res.data.rate
    }
  })
  console.log('666', chartData.accessDate)
  // acceptChartData()
  // acceptListData()
  // // // 模型评分
  // acceptModelScoring()
}
watch(
  () => {
    props.data
  },
  () => {
    searchDataValue(props.data)
  },
  {
    deep: true,
    immediate: true
  }
)
emitter.on('searchData', searchDataValue)

// 分页事件
function handleCurrentChange(val) {
  // page.pageNumber = val
  currentPage.value = val
  formParamas.pageNum = val

  acceptListData()
}
// 成功率
function handleSuccessRate(successNum, accessDate) {
  if (successNum == undefined || accessDate == undefined) {
    return 0 + '%'
  } else {
    return Math.round(successNum / accessDate) * 100 + '%'
  }
}

// 获取chart数据
function acceptChartData() {
  getmodelStabilityChart(formParamas).then((res) => {
    chartData.accessDate = []
    chartData.accessNum = []
    chartData.successNum = []
    chartData.failNum = []
    if (res.code == 200) {
      res.data.forEach((e) => {
        chartData.accessDate.push(e['accessDate'])
        chartData.accessNum.push(e['accessNum'])
        chartData.successNum.push(e['successNum'])
        chartData.failNum.push(e['failNum'])
      })
    }
  })
}
// 获取列表分页
function acceptListData() {
  getModelStabilityList(formParamas).then((res) => {
    if (res.code == 200) {
      listData.value = res.data.list
      page.total = res.data.totalRow
    }
  })
}
// 模型评分
function acceptModelScoring() {
  getModelScoring(formParamas).then((res) => {
    if (res.code == 200) {
      scoringData.value = res.data
      console.log(scoringData, '66666')
    }
  })
}
</script>

<style lang="less" scoped>
.model-stable {
  display: flex;
  flex-direction: column;
  height: 100%;

  .top {
    display: flex;
    flex-direction: row;
    height: 300px;

    .chart {
      flex: 1;
    }
  }

  .bottom {
    flex: 1;
    display: flex;
    flex-direction: row;
    height: calc(100% - 300px);

    .box {
      flex: 1;

      .title {
        line-height: 30px;
        text-align: center;
      }

      .content {
        height: calc(100% - 30px);
        box-sizing: border-box;
      }
    }

    .left-box {
      .content {
        display: flex;
        flex-direction: column;
        padding: 0px 50px 0px 20px;
      }

      .line {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .num {
          font-weight: 700;
          font-size: 20px;
          margin: 0 5px;
        }

        .blue {
          color: #0054db;
        }

        .green {
          color: #70b603;
        }
        .red {
          color: red;
        }
      }
    }

    .right-box {
      .table {
        height: calc(100% - 50px);
      }

      .page {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50px;
      }
    }
  }
}
</style>
